<template>
  <div class="design-engine">
    <div class="dingflow-design">
      <div class="ie-polyfill-container">
        <div class="box-scale" id="box-scale">
          <!-- 申请人 -->
          <myTree :treedata="formdataTree[0]"></myTree>

          <div class="end-node">
            <div class="end-node-circle"></div>
            <div class="end-node-text">流程结束</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { transToTreeDat } from "./utils";
import myTree from "@/components/newDrawFlow/myTree/myTree";
export default {
  components: { myTree },
  data() {
    return {
      selfConfig: null,
      formdataTree: null,
    };
  },
  props: {
    FlowConfig: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created() {
    this.init();
  },
  methods: {
    // 获取数据
    init() {
      this.selfConfig = JSON.parse(JSON.stringify(this.FlowConfig));
      this.formdataTree = transToTreeDat(this.selfConfig);
    },
  },
};
</script>

<style scoped lang="less">
.design-engine {
  position: relative;
  height: 100%;
  .dingflow-design {
    width: 100%;
    // background-color: #f5f5f7;
    overflow: auto;
    height: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /deep/ .ant-popover-arrow {
      display: none !important;
    }
    .ie-polyfill-container {
      display: -ms-grid;
      -ms-grid-columns: min-content;
      .box-scale {
        transform: scale(1);
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 54.5px 0;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
        // background-color: #f5f5f7;
        -webkit-transform-origin: 0 0 0;
        transform-origin: 50% 0px 0px;
        .end-node {
          border-radius: 50%;
          font-size: 14px;
          color: rgba(25, 31, 37, 0.4);
          text-align: left;
          .end-node-circle {
            width: 10px;
            height: 10px;
            margin: auto;
            border-radius: 50%;
            background: #dbdcdc;
          }
          .end-node-text {
            margin-top: 5px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
